<template>
    <nly-content-wrapper>
        <nly-content>
            <div style="margin-top: 50px;">
                <a-tabs v-model="tabKey" tab-position="left" style="height: calc(100vh)" @change="tabChange">
                    <a-tab-pane key="1" tab="工作报表">
                        <a-table :columns="setColumns" :data-source="setData" bordered :pagination="false">
                            <template slot="submit" slot-scope="text, record, index">
                                <input-group-search labelStyle="display:none" rightStyle="width: 170px;" treeType="officeUser" :valueTitle.sync="setData[index].submitName" v-model="setData[index].submitId" />
                            </template>
                            <template slot="cc" slot-scope="text, record, index">
                                <a-input-search v-model="setData[index].ccName" read-only @click="selectCC(index)" @search="selectCC(index)" />
                            </template>
                            <template slot="deadline" slot-scope="text, record, index">
                                <a-cascader :options="options[index]" style="width: 250px;" v-model="setData[index].deadline" @change="deadlineChange" placeholder="请选择截止时间" />
                            </template>
                            <template slot="isOvertime" slot-scope="text, record, index">
                                <a-radio-group name="isOvertime" v-model="setData[index].isOvertime" :default-value="0">
                                    <a-radio :value="0">否</a-radio>
                                    <a-radio :value="1">是</a-radio>
                                </a-radio-group>
                            </template>
                        </a-table>
                        <div style="margin-top: 20px;">
                            <a-button type="primary" html-type="submit" @click="saveReportUser">保存</a-button>
                        </div>
                    </a-tab-pane>
                    <!-- <a-tab-pane key="2" tab="工作计划">
            <a-table :columns="setColumns" :data-source="setData" bordered :pagination="false">
              <template slot="submit" slot-scope="text, record, index">
                <input-group-search labelStyle="display:none" rightStyle="width: 170px;" treeType="officeUser" :valueTitle.sync="setData[index].submitName" v-model="setData[index].submitId"/>
              </template>
              <template slot="cc" slot-scope="text, record, index">
                <a-input-search v-model="setData[index].ccName" read-only @click="selectCC(index)"  @search="selectCC(index)"/>
              </template>
              <template slot="deadline" slot-scope="text, record, index">
                <a-cascader :options="options[index]" style="width: 250px;" v-model="setData[index].deadline" @change="deadlineChange" placeholder="请选择截止时间"/>
              </template>
              <template slot="isOvertime" slot-scope="text, record, index">
                <a-radio-group name="isOvertime" v-model="setData[index].isOvertime" :default-value="0">
                  <a-radio :value="0">否</a-radio>
                  <a-radio :value="1">是</a-radio>
                </a-radio-group>
              </template>
            </a-table>
            <div style="margin-top: 20px;">
              <a-button type="primary" html-type="submit" @click="saveReportUser">保存</a-button>
            </div>
          </a-tab-pane> -->
                    <a-tab-pane key="3" tab="工作总结">
                        <a-table :columns="setColumns" :data-source="setData" bordered :pagination="false">
                            <template slot="submit" slot-scope="text, record, index">
                                <input-group-search labelStyle="display:none" rightStyle="width: 170px;" treeType="officeUser" :valueTitle.sync="setData[index].submitName" v-model="setData[index].submitId" />
                            </template>
                            <template slot="cc" slot-scope="text, record, index">
                                <a-input-search v-model="setData[index].ccName" read-only @click="selectCC(index)" @search="selectCC(index)" />
                            </template>
                            <template slot="deadline" slot-scope="text, record, index">
                                <a-cascader :options="options[index]" style="width: 250px;" v-model="setData[index].deadline" @change="deadlineChange" placeholder="请选择截止时间" />
                            </template>
                            <template slot="isOvertime" slot-scope="text, record, index">
                                <a-radio-group name="isOvertime" v-model="setData[index].isOvertime" :default-value="0">
                                    <a-radio :value="0">否</a-radio>
                                    <a-radio :value="1">是</a-radio>
                                </a-radio-group>
                            </template>
                        </a-table>
                        <div style="margin-top: 20px;">
                            <a-button type="primary" html-type="submit" @click="saveReportUser">保存</a-button>
                        </div>
                    </a-tab-pane>
                </a-tabs>
            </div>
            <a-modal v-model="ccUserVisible" title="抄送人选择" centered on-ok="handleok" width="300px">
                <div style="height: 400px;overflow-y:scroll;">
                    <a-input-search style="margin-bottom: 8px" placeholder="输入用户名称" @change="onChange" />
                    <div v-show="treeAShow">
                        <a-tree v-model="checkedUserKeys" :tree-data="userSearchData" :show-icon="true" :expanded-keys="expandedUserKeys" @expand="expanedChange" :defaultExpandAll="true" checkable @check="userCheck">
                            <a-icon slot="user" type="user" />
                        </a-tree>
                    </div>
                    <div v-show="treeBShow">
                        <a-tree v-model="checkedUserKeys" :tree-data="userAllData" :show-icon="true" checkable :defaultExpandAll="true" @check="userCheck">
                            <a-icon slot="user" type="user" />
                        </a-tree>
                    </div>
                </div>
                <template slot="footer">
                    <a-button key="submit" type="primary" @click="() => (ccUserVisible = false)">确定</a-button>
                    <a-button key="back" @click="() => (ccUserVisible = false)">关闭</a-button>
                </template>
            </a-modal>
        </nly-content>
    </nly-content-wrapper>
</template>

<script>
import { saveReportUser, detail } from "@/api/work/reporUser";
import { TreeDataOffice } from "@/api/office";
import { officeUserListToTree, searchInTreeData } from "@/utils/tree";

const basePostData = {
    current: 1,
    size: 20
};

export default {
    data () {
        const setColumns = [
            {
                title: "类型",
                dataIndex: "type",
                key: "type",
                width: 60,
                customRender: (text, row) => {
                    const type = ["日", "周", "月"];
                    return this.tabKey == 1 ? type[text - 1] + "报" : type[text - 1];
                }
            },
            {
                title: "报送",
                dataIndex: "submitName",
                key: "submitName",
                width: 80,
                scopedSlots: { customRender: "submit" }
            },
            {
                title: "抄送",
                dataIndex: "ccName",
                key: "ccName",
                width: 220,
                scopedSlots: { customRender: "cc" }
            },
            {
                title: "报送截止时间",
                dataIndex: "deadline",
                key: "deadline",
                width: 220,
                scopedSlots: { customRender: "deadline" }
            },
            {
                title: "超时报送",
                dataIndex: "isOvertime",
                key: "isOvertime",
                width: 100,
                scopedSlots: { customRender: "isOvertime" }
            }
        ];

        return {
            tabKey: "1",
            setIndex: -1,
            setColumns,
            setData: [],
            deadlineText: "", //截止日期
            checkedUserKeys: [], //用户tree keys
            userSearchData: [], //用户搜索数据
            userAllData: [], //用户所有tree数据
            treeAShow: false, //搜索用户tree
            treeBShow: true, //用户tree
            ccUserVisible: false,
        };
    },
    mounted () {
        TreeDataOffice({ isLoadUser: 2 }).then(response => {
            const { data } = response;
            const childrenNav = [];
            officeUserListToTree(data, childrenNav, "0");
            this.userAllData = childrenNav;
            this.userSearchData = childrenNav;
        });

        this.SetReportUser();

        let m = [];
        let hour = [];
        let week = [];
        let weekName = ['一', '二', '三', '四', '五', '六', '日'];
        let month = [];
        for (let i = 0; i < 4; i++) {
            m.push({
                value: i * 15,
                label: i * 15 + '分',
                children: [],
            });
        }
        for (let i = 0; i < 23; i++) {
            hour.push({
                value: i,
                label: i + '时',
                children: m,
            });
        }
        for (let i = 1; i < 8; i++) {
            week.push({
                value: i,
                label: '周' + weekName[i - 1],
                children: hour,
            });
        }
        for (let i = 1; i < 32; i++) {
            month.push({
                value: i,
                label: i + "号",
                children: hour,
            });
        }


        for (let i = 0; i < 3; i++) {
            if (i == 0) { }
        }

        this.options = [
            [
                {
                    value: 1,
                    label: '当日',
                    children: hour,
                },
                {
                    value: 2,
                    label: '次日',
                    children: hour,
                }
            ],
            [
                {
                    value: 1,
                    label: '当周',
                    children: week,
                },
                {
                    value: 2,
                    label: '次周',
                    children: week,
                }
            ],
            [
                {
                    value: 1,
                    label: '当月',
                    children: month,
                },
                {
                    value: 2,
                    label: '次月',
                    children: month,
                }
            ],
        ];
    },
    methods: {
        //tab 切换
        tabChange (key) {
            console.log(key);
            this.tabKey = key;
            this.SetReportUser();
        },
        //设置抄送人
        selectCC (index) {
            this.ccUserVisible = true;
            this.setIndex = index;
            const userKeys = this.setData[index].ccId.split(",");
            this.checkedUserKeys = [];
            userKeys.forEach(item => this.checkedUserKeys.push(item + "_user"));
            console.log(this.checkedUserKeys);
        },
        //设置报送人
        SetReportUser () {
            this.setVisible = true;
            console.log(this.tabKey)
            detail({ workType: this.tabKey }).then(res => {
                if (res.code == 200 && res.data.length > 2) {
                    this.setData = res.data;
                    this.setData.forEach(item => item.deadline = item.deadline.split(",").map(Number));
                    console.log(this.setData);
                } else {
                    this.setData = [
                        {
                            type: 1,
                            ccId: "",
                            ccName: "",
                            submitId: "",
                            submitName: "",
                            deadline: [],
                            isOvertime: 0,
                            userKeys: [],
                            workType: this.tabKey
                        },
                        {
                            type: 2,
                            ccId: "",
                            ccName: "",
                            submitId: "",
                            submitName: "",
                            deadline: [],
                            isOvertime: 0,
                            userKeys: [],
                            workType: this.tabKey
                        },
                        {
                            type: 3,
                            ccId: "",
                            ccName: "",
                            submitId: "",
                            submitName: "",
                            deadline: [],
                            isOvertime: 0,
                            userKeys: [],
                            workType: this.tabKey
                        },
                    ];
                }
            });
        },
        //保存报表设置
        saveReportUser () {
            let data = [...this.setData];
            data.forEach(item => item.deadline = item.deadline.toString());
            saveReportUser(data).then(res => {
                if (res.code == 200) {
                    this.setVisible = false;
                    this.$message.success("保存成功");
                    this.SetReportUser();
                } else {
                    // this.$message.warning(response.message);
                }
            });
        },
        //用户tree选择
        userCheck (keys, info) {
            console.log(keys);
            this.ccUserNames = "";
            this.ccUserIds = "";
            if (info.checkedNodes.length > 0) {
                for (let i = 0; i < info.checkedNodes.length; i++) {
                    const id = info.checkedNodes[i].data.props.id;
                    const name = info.checkedNodes[i].data.props.name;
                    if (id.indexOf("user") != -1) {
                        this.ccUserNames += name + ",";
                        this.ccUserIds += id.split("_")[0] + ",";
                    }
                }
                this.ccUserNames = this.ccUserNames.slice(0, this.ccUserNames.length - 1);
                this.ccUserIds = this.ccUserIds.slice(0, this.ccUserIds.length - 1);
                if (this.setIndex != -1) {
                    this.setData[this.setIndex].ccId = this.ccUserIds;
                    this.setData[this.setIndex].ccName = this.ccUserNames;
                    this.setData[this.setIndex].userKeys = keys;
                }
            }
        },
        deadlineChange (value, selectedOptions) {
            console.log(value, selectedOptions.map(o => o.label).join(' '))
            const text = selectedOptions.map(o => o.label).join(' ');
            if (text.indexOf("日") != -1) {
                this.setData[0].deadlineText = text;
            } else if (text.indexOf("周") != -1) {
                this.setData[1].deadlineText = text;
            } else {
                this.setData[2].deadlineText = text;
            }
        },
        displayRender ({ labels }) {
            return labels[labels.length - 1];
        },
    }
};
</script>
<style lang="less" scoped>
    .avatar-uploader > .ant-upload {
        width: 110px;
        height: 110px;
    }
    .ant-upload-select-picture-card i {
        font-size: 32px;
        color: #999;
    }
    .ant-upload-select-picture-card .ant-upload-text {
        margin-top: 8px;
        color: #666;
    }
    .user-class .ant-form-item {
        margin-bottom: 2px !important;
    }
    .form-inline label {
        justify-content: left !important;
    }
    .form-inline > .col {
        margin-bottom: 1.5rem !important;
    }
    .icons-list /deep/ .anticon {
        margin-right: 8px;
        font-size: 16px;
    }
    .ant-advanced-search-form {
        padding: 24px;
        background: #fbfbfb;
    }

    .ant-advanced-search-form .ant-form-item {
        display: flex;
    }

    .ant-advanced-search-form .ant-form-item-control-wrapper {
        flex: 1;
    }

    #components-form-demo-advanced-search .ant-form {
        max-width: none;
    }
    #components-form-demo-advanced-search .search-result-list {
        margin-top: 16px;
        background-color: #fafafa;
        min-height: 200px;
        text-align: center;
        padding-top: 80px;
    }
    // .crm-btn {
    //   margin-left: 10px;
    //   margin-bottom: 10px;
    // }
    ::v-deep {
        .ant-form-item-label label {
            font-weight: normal !important;
        }
    }
</style>